<template>
  <div class="login-page">
    <div class="login-container">
      <h2 class="login-header">Login</h2>
      <div class="login-body">
        <a-form
          id="form-login"
          :form="form"
          class="login-form"
          @submit="handleSubmit"
        >
          <a-form-item>
            <a-input
              v-decorator="[
                'userName',
                {
                  rules: [
                    { required: true, message: '请输入用户名!' },
                  ],
                },
              ]"
              placeholder="用户名"
            >
              <a-icon
                slot="prefix"
                type="user"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              v-decorator="[
                'password',
                {
                  rules: [
                    { required: true, message: '请输入密码!' },
                  ],
                },
              ]"
              type="password"
              placeholder="密码"
            >
              <a-icon
                slot="prefix"
                type="lock"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button
              type="primary"
              html-type="submit"
              class="login-form-button"
            >
              登录
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'login',
  middleware() {
    console.log('middleware局部的路由守卫检验>>>→➡️➡️➡️')
  },
  validate(params, query) {
    console.log('validate检验跳转传递的参数>>>→➡️➡️➡️', query)
    return true
  },
  asyncData() {
    console.log('asyncData页面请求数据>>>→➡️➡️➡️')
  },

  data() {
    return {}
  },

  
  fetch() {
    console.log('fetch获取数据>>>→➡️➡️➡️')
  },
  head: {
    title: "登录页",
  },

  created() {},

  mounted() {
    console.log('挂载了>>>→➡️➡️➡️')
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_login' })
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          this.$router.push('/')
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.login-page {
  width: 100%;
  height: 100%;
  position: relative;
  background: url('~assets/image/login/login-bg-1.png') no-repeat center center;
  background-size: cover;
}
.login-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 30px 40px 10px 40px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
}
.login-form-button {
  width: 100%;
}
</style>
